<template>
    <div class="module">
        <el-menu :default-active="offerType" @select="changeOfferType" mode="horizontal" class="offerType">
            <el-menu-item index="hangkou">行口报价</el-menu-item>
            <el-menu-item index="huokuan">货款报价</el-menu-item>
        </el-menu>
        <div style="margin-top: 12px;">
            <el-col :span="24" class="check_bill_int want_check_bill_int">
                <div class="want_bill_detail_btn">
                    <el-button size="small" type="primary" class="want_chosoe_up_down_text" @click="pickUpDetail()">{{isChooseDetail ? '收起' : '展开'}} <i :class="[isChooseDetail ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
                </div>
                <div>
                    <el-input placeholder="企业名称/联系人/联系方式/关联中介/渠道代理" v-model="searchParam" clearable @clear="inputChoose()"></el-input><el-button type="primary" size="small" @click="inputChoose()">搜索</el-button>
                </div>
            </el-col>
        </div>
        <div class="content">
            <FiltrateTemplate
                    v-show="isChooseDetail"
                    :templateSource="this.filterSource"
                    @changeBillTypeIdFun="changeBillTypeIdFun"
                    @changeDateFun="changeDateFun"
                    @searchBillSumPriceFun="searchBillSumPriceFun"
                    @clearBillSumPriceFun="clearBillSumPriceFun"
                    @changeAcceptFun="changeAcceptFun"
                    @changeFlawFun="changeFlawFun"
                    @clearAllChooseFun="clearAllChooseFun"
                    @closeTagFun="closeTagFun"
                    ref="wantBillFilterChoose">
            </FiltrateTemplate>
        </div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="form-title">
                <div class="form-title-con">
                    报价列表
                    &#X3000;
                    <el-button type="primary" size="small" v-if="offerType == 'hangkou'" @click="$router.push('/trade/newOffer')">新建行口报价</el-button>
                    <el-button type="primary" size="small" v-if="offerType == 'huokuan'" @click="$router.push('/trade/newWantBill')">新建货款报价</el-button>
                </div>
            </el-col>
            <el-col :span="24" class="delete hpx-red-tips" v-if="offerType == 'huokuan'" style="text-align: right;">
                <el-button type="danger" size="small" @click="remove()" :disabled="sectionArr.length == 0 && isSelect"><i class="iconfont icon-shanchu"></i> 删除</el-button>
                <el-button type="text" @click="cancelCheck" v-if="isSelect">取消</el-button>
            </el-col>
        </el-row>
        <div v-if="offerType == 'hangkou' && offerList.length == 0" class="no_offer">今日暂无报价记录</div>
        <div v-if="offerType == 'hangkou' && offerList.length != 0">
            <div class="offer_block" v-for="offer in offerList" :key="offer.index">
                <el-row class="basic_info">
                    <div class="item"><label class="label">报价时间: </label><span class="value">{{offer.offerTime}}</span></div>
                    <div class="item"><label class="label">票据类型: </label><span>{{offer.billType}}</span></div>
                    <div class="item"><label class="label">瑕疵可收: </label><span class="value">{{offer.billFlawId == 0 ? '不可':'可'}}</span></div>
                    <div class="item"><label class="label">交易方式: </label><span class="value">{{offer.tradeType}}</span></div>

                    <div class="item"><label class="label">报价机构: </label><span class="value">{{offer.enterpriseName}}</span>
                        <i class="bill_source">
                            <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_1.png" alt="" v-if="offer.customerStatus == 2">
                            <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_2.png" alt="" v-if="offer.customerStatus == 1">
                            <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/NO_3.png" alt="" v-if="offer.customerStatus == 0">
                        </i>
                    </div>
                    <div class="item"><label class="label">联系人: </label><span class="value">{{offer.contactName}}</span></div>
                    <div class="item"><label class="label">联系方式: </label><span class="value">{{offer.contactPhone}}</span></div>

                    <span class="delete_offer">
                        <el-button type="primary" plain size="small" @click="editOffer(offer)">修改</el-button>
                        <el-button type="danger" plain size="small" @click="deleteOffer(offer)">
                            <i class="iconfont icon-shanchu"></i> 删除本次报价
                        </el-button>
                    </span>
                </el-row>
                <div class="term_interval" v-for="(item, index) in offer.pccOfferTimeDtos" :key="index">
                    <el-row class="term_title hpx-title-border">
                        <span class="title_text">期限区间: </span>
                        <span>{{item.startTime}}——{{item.endTime}}</span>
                        <span class="top_btn">
                            <el-button type="primary" plain size="small" @click="item.isShow = !item.isShow">
                                {{item.isShow ? '收起' : '展开'}} <i :class="[item.isShow ? 'el-icon-arrow-up' :'el-icon-arrow-down']"></i>
                            </el-button>
                        </span>
                    </el-row>
                    <el-row class="offer_detail" v-if="item.isShow">
                        <el-row class="table_header">
                            <el-col class="column">承兑机构</el-col>
                            <el-col class="column">票面金额(万元)</el-col>
                            <el-col class="column">贴现率({{offer.billTypeId == 101 ? '%':'‰'}})</el-col>
                            <el-col class="column">每十万加(元)</el-col>
                        </el-row>
                        <el-row class="table_body" v-for="detail in item.pccBillDetails" :key="detail.id">
                            <el-col class="column">{{detail.acceptorName}}</el-col>
                            <el-col class="column">{{detail.billPriceRegion}}</el-col>
                            <el-col class="column">{{detail.billRate}}</el-col>
                            <el-col class="column">{{detail.offerEveryPlus}}</el-col>
                        </el-row>
                    </el-row>
                </div>
            </div>
            <div class="right clear">
                <el-pagination
                        @size-change="onSizeChange"
                        @current-change="onFlipOver"
                        :current-page="pagination.currentPage"
                        :page-sizes="pagination.pageSizes"
                        :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>
        <PccTable v-if="offerType == 'huokuan'"
                  :tableData="tableData"
                  :detailData="detailData"
                  @change="changePage"
                  @changes="changeSize"
                  :isSelect="isSelect"
                  @selection="selection"
        >
            <!-- @remove="click_delete" -->
            <template slot-scope="{scope}">
                <el-button type="primary" plain size="small" @click="showEndorsed(scope.row)">详情</el-button>
            </template>
        </PccTable>
        <DialogInput ref="deleteOffer" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row>是否删除已选择的{{sectionArr.length}}个报价?</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmDetail()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import FiltrateTemplate from '@component/common/FiltrateTemplate.vue';
    import PccTable from '@component/common/PccTable.vue';
    import DialogInput from '@component/common/DialogInput.vue'
    import moment from 'moment'
    import { hideStr, ellipsis } from '@/util/format'
    @Component({
        extends: Pagination,
        components: {
            FiltrateTemplate,
            PccTable,
            DialogInput
        }
    })
    export default class WantBill extends Vue {
        filterSource: string = 'wantBill';
        offerType:string = 'hangkou';
        searchParam: string = ''
        tableData = []
        offerList:any = []
        pageNo = 1
        pageSize = 10
        totalPage = 0
        isChooseDetail: boolean = false
        pickUpDetail () {
            this.isChooseDetail = !this.isChooseDetail
        }
        nowDelete:Object = {}
        form = {
            acceptorType: '',
            billFlaw: '',
            billSumPrice: '',
            deadlineDays: '',
            LoanAndEntrance: 'entrance', //'load'货款，'entrance'，行口
            //outUsageIsEntrance:0, //0：非行口 1：行口
            //outUsageIsLoan: 0,   //0：非货款 1：货款
            orderBy: "-offerTime"
        }
        filterCondition = {

        }
        filterModel = {
            billTypeId: '',
            billSumPrice: '',
            deadlineDays: '',
            acceptorType: '',
            flaw: ''
        }
        //切换报价类型
        changeOfferType (tab){
            this.searchParam = ''
            this.offerType = tab;
            this.$refs.wantBillFilterChoose.clearAllChoose();
        }
        // 获取行口报价列表
        async getOfferList () {
            let params = {
                pageNo: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                billSumPrice: this.filterModel.billSumPrice,
                billTypeId: this.filterModel.billTypeId,
                billFlaw: this.filterModel.flaw,
                acceptorType: this.filterModel.acceptorType,
                deadlineDays: this.filterModel.deadlineDays,
                searchParam: this.searchParam
            }
            let res = await this.$http.post('pcc/admin/getBillOfferDetailList', params)
            if (res.status == 200) {
                let list = res.data.items.filter(list => list.pccOfferTimeDtos)
                list.map((list,index) => {
                    list.index = index
                })
                for(let i = 0;i<list.length;i++){
                    for(let k = 0;k<list[i].pccOfferTimeDtos.length;k++){
                        list[i].pccOfferTimeDtos[k].isShow = false
                        list[0].pccOfferTimeDtos[0].isShow = true
                    }
                }
                this.offerList = list
                this.pagination.total = res.data.totalNum;
            }
        }
        // 获取货款报价列表
        async getPaymentList () {
            let params = {
                pageNo: this.tableData.footer.currentPage,
                pageSize: this.tableData.footer.pageSize,
                billSumPrice: this.filterModel.billSumPrice,
                billTypeId: this.filterModel.billTypeId,
                billFlaw: this.filterModel.flaw,
                acceptorType: this.filterModel.acceptorType,
                deadlineDays: this.filterModel.deadlineDays,
                searchParam: this.searchParam
            }
            let res = await this.$http.post('pcc/admin/getWantBillList', params)
            if (res.status == 200) {
                if (res.data != null) {
                    this.tableData.body = res.data.items
                    this.tableData.footer.total = res.data.totalNum
                    this.tableData.footer.pageSize = res.data.pageSize
                    this.tableData.body.map((item, index) => {
                        item.index = index
                    })
                } else {
                    this.tableData.body = []
                    this.tableData.footer.total = 0
                }
            }
        }
        //货款报价列表
        tableData:TableData = {
            header: [
                {
                    label: '发布时间',
                    key: 'create_time',
                    formatter: (row:any) => moment(row.create_time).format('YYYY-MM-DD HH:mm')
                },
                {
                    label: '报价机构',
                    key: 'enterpriseName'
                    // formatter: (row:any) =>
                },
                {
                    label: '票据类型',
                    key: 'billTypeId',
                    formatter: (row:any) => row.billTypeId == 101 ? '电票' : '纸票'
                },
                {
                    label: '票面金额',
                    key: 'min_face_price',
                    formatter: (row:any) => '['+row.minFacePrice+'万,'+row.maxFacePrice+'万]'
                },
                {
                    label: '每十万加',
                    key: 'tenRate'
                },
                {
                    label: '承兑机构',
                    key: 'acceptorTypeName',
                    formatter: (row:any) => ellipsis(row.acceptorTypeName.join('，'), '...', 8)
                }
            ],
            body: [],
            footer: {
                total: 10,
                pageSize: 10,
                currentPage: 1,
            }
        }
        //是否显示勾选框
        isSelect:boolean = false
        //已勾选的数据
        sectionArr = []
        //货款报价详细信息
        detailData = {
            enterpriseName:'',
            wantNumbe: '',
            //tradeTypeId: '',  //交易方式  1801：买断  !1805 带贴
            startTime: '',
            endTime: '',
            falwRequire: [],  //瑕疵可收  1: 可  !1: 不可
            contactName: '',
            contactPhone: '',
            description: '' //原始报价
        }

        //修改行口报价
        async editOffer (offer) {
            this.$router.push(`/trade/newOffer/${offer.id}`)
        }
        //删除行口报价
        deleteOffer (offer) {
            this.nowDelete = offer
            // this.$refs['remin'].openDialog()
            this.$confirm('是否删除该报价？','提醒',{
                confirmButtonText: '继续',
                cancelButtonText: '以后再说',
                customClass: 'custom-message-box',
                center: true
            }).then(() => {
                this.confirmDelete()
            }).catch((err) => {
                console.log(err)
            })
        }
        //确认删除行口报价
        async confirmDelete () {
            let params = {
                billOfferIds: this.nowDelete.id
            }
            let res = await this.$http.delete('pcc/admin/deleteBillOffer',{params})
            if(res.status == 200){
                // this.$refs['success'].openDialog()
                this.getOfferList()
            }
        }
        //获取货款报价详情
        async showEndorsed (row) {
            let params = {
                wantBillId: row.id
            }
            let res = await this.$http.get('pcc/admin/getBillWantDetail',{params})
            if(res.status == 200){
                this.detailData = res.data
            }
        }
        //显示/隐藏勾选框
        remove () {
            this.isSelect ? this.$refs['deleteOffer'].openDialog() : this.isSelect = true
        }
        //取消勾选
        cancelCheck () {
            this.isSelect = false
        }
        //勾选
        selection (item) {
            this.sectionArr = item;
        }
        //确定删除货款
        async confirmDetail () {
            let params = {
                wantBillIds: this.sectionArr.map(item => item.id).join(',')
            }
            let res = await this.$http.delete('pcc/admin/deleteWantBill',{params})
            if(res.status == 200){
                this.$refs['delete'].closeDialog();
                this.getPaymentList()
                this.$refs['success'].openDialog()
            }
        }
        closeDialog () {
            this.$refs['remin'].closeDialog()
            this.$refs['deleteOffer'].closeDialog()
            this.$refs['success'].closeDialog()
        }
        //分页回调
        change (page:number) {
            this.pageNo = page
            this.getOfferList()
        }
        changes (size:number) {
            this.pageSize = size
            this.getOfferList()
        }
        changePage (page:number) {
            this.tableData.footer.currentPage = page
            this.getPaymentList()
        }
        changeSize (size:number) {
            this.tableData.footer.pageSize = size
            this.getPaymentList()
        }
        created () {

        }

        filterFunction (data: any) {
            this.filterModel = data.filterModel;
            this.filterCondition = data.filterCondition;
            if (this.offerType == 'huokuan') {
                this.getPaymentList()
            } else {
                this.getOfferList()
            }
        }
        changeBillTypeIdFun (data) {
            this.filterFunction(data);
        }
        changeDateFun (data) {
            this.filterFunction(data);
        }
        searchBillSumPriceFun (data) {
            this.filterFunction(data);
        }
        clearBillSumPriceFun (data) {
            this.filterFunction(data);
        }
        changeAcceptFun (data) {
            this.filterFunction(data);
        }
        changeFlawFun (data) {
            this.filterFunction(data);
        }
        closeTagFun (data) {
            this.filterFunction(data);
        }
        // 全部清空
        clearAllChooseFun (data) {
            this.filterFunction(data);
            // if (this.offerType == 'huokuan') {
            //     this.getOfferList()
            // } else {
            //     this.getPaymentList()
            // }
        }
        inputChoose () {
            if (this.offerType == 'huokuan') {
                this.getPaymentList()
            } else {
                this.getOfferList()
            }
        }

        loadDataForPagination() {
            this.getOfferList()
        }

        mounted () {
            this.getOfferList();
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        margin-top: 58px;
    }
    .el-menu--horizontal > .el-menu-item{
        height: 50px !important;
        line-height: 50px !important;
        font-size: 16px;
    }
    .el-menu--horizontal > .el-menu-item.is-active{
        color: $__color-primary !important;
    }
    .filter_btn{
        padding-top: 16px;
        .delete{
            text-align: right;
        }
        border-bottom: none;
    }
    .no_offer{
        width: 400px;
        height: 100px;
        background-color: $__color-bg-primary;
        margin: 30px auto;
        line-height: 100px;
        text-align: center;
        font-size: 16px;
        color: $__color-label;
        border-radius: 4px;
    }
    .offer_block{
        margin-bottom: 30px;
        &:last-child{
            margin-bottom: 0px;
        }
        .basic_info{
            width: 100%;
            height: 50px;
            line-height: 50px;
            border-radius: 4px;
            background-color: $__color-bg-unimportance;
            font-size: 14px;
            padding: 0 14px;
            border:1px solid $__color-primary;
            .item{
                margin-right: 2.5%;
                float: left;
                .label{
                    color: $__color-label;
                }
            }
            .delete_offer{
                float: right;
            }
        }
        .term_interval {
            border-radius: 4px;
            border: 1px dashed $__color-line;
            .term_title{
                height: 50px;
                line-height: 50px;
                font-size: $__font-size-default;
                border-bottom: 1px solid $__color-line;
                padding-right: 14px;
                color: $__color-label;
                .title_text{
                    margin-left: 10px;
                    color: $__color-show;
                }
                .top_btn{
                    float: right;
                }
            }
            .offer_detail{
                .el-row{
                    height: 50px;
                    line-height: 50px;
                    border-bottom: 1px solid $__color-line;
                    &:last-child{
                        border-bottom: none;
                    }
                    .column{
                        width: 25%;
                        text-align: center;
                        font-size: $__font-size-default;
                        color: $__color-label;
                    }
                }
            }
        }
    }
    .iconfont{
        font-size: 14px;
    }
    .bill_source{
        float: left;
        img{
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }
    }
    .bill_source{
        display: inline-block;
        width: 45px;
        text-align: right;
        position: relative;
        top: 0px;
        .iconfont{
            font-size: 22px;
        }
    }
    .want_chosoe_up_down_text {
        background: $__color-bg-unimportance;
        color: $__color-primary;
        border: 1px solid $__color-primary;
        height: 32px;
        padding: 9px 12px;
    }
</style>
<style lang="scss">
    .want_check_bill_int {
        justify-content: space-between !important;
        .want_bill_detail_btn {
            .el-button--small {
                border-radius: 4px !important;
            }
        }
    }
</style>